import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { VxeColumnSlotTypes } from 'vxe-table'
import type { AnyObject } from '@/types'
import DrawerAdd from './components/DrawerAdd'
import { Button, message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'
import { getInsureCompanyRuleList, removeInsureCompanyRule } from '@/api/insureCompanyRule'
import type { InsureCompanyRuleDto } from '@/api/insureCompanyRule/types'
import { InsureTypeCnEnum } from '@/const/enum'
import type { AddType } from '@/api/types'
import DrawerPreview from './components/DrawerPreivew'

@Component
export class InsuranceCompanyView extends TableRender {

    showDrawer = false
    showPreview = false

    curData = {} as InsureCompanyRuleDto
    type = 'add' as AddType

    tableColumnConfigOld = () => [
        { type: 'checkbox', width: 50, fixed: 'left' },
        {
            field: 'id',
            title: '规则ID',
        },
        {
            field: 'ruleName',
            title: '规则名称',
        },
        {
            field: 'insureType',
            title: '保险产品',
            formatter: ({row}) => {
                return InsureTypeCnEnum[row.insureType]
            }
        },
        {
            field: 'planNameList',
            title: '关联方案',
            formatter: ({row}) => {
                return row.planNameList?.join('、')
            }
        },
        {
            field: 'createUserName',
            title: '创建人',
            // params: {
            //     tooltip: {
            //         text: (row) => '',//row.createName,
            //         content: (row) => ''//`手机号：${row.phone}`
            //     }
            // },
            // slots: {
            //     default: 'tooltip'
            // }
        },
        {
            field: 'createTime',
            title: '创建时间',
            width: 160
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 270,
            params: {
                buttons: [
                    {
                        text: '预览',
                        event: (row) => {
                            this.onPreive(row)
                        }
                    },
                    {
                        text: '复制',
                        event: (row) => {
                            this.onCopy(row)
                        }
                    },
                    {
                        text: '编辑',
                        event: (row) => {
                            this.onEdit(row)
                        }
                    },
                    {
                        text: '删除',
                        type: 'danger',
                        event: (row) => {
                            this.onRemove(row)
                        }
                    },
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ]  as TableRenderColumnTypes<InsureCompanyRuleDto>

    
    onLoadData(page: number, size: number, filters: AnyObject) {
        return getInsureCompanyRuleList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    onPreive(row: InsureCompanyRuleDto) {
        this.showPreview = true
        this.curData = row
    }

    onCopy(row: InsureCompanyRuleDto) {
        this.curData = row
        this.type = 'newAdd'
        this.showDrawer = true
    }

    onEdit(row: InsureCompanyRuleDto) {
        this.curData = row
        this.type = 'edit'
        this.showDrawer = true
    }

    async onRemove(row: InsureCompanyRuleDto) {
        await removeInsureCompanyRule({
            id: row.id
        })
        message.success('删除成功')
        this.reloadPage()
    }

    onShowDrawer() {
        this.type = 'add'
        this.showDrawer = true
    }

    renderTitle() {
        return <div class="flex items-center justify-between px-20px">
            <div>规则列表</div>
            <Button type="primary" icon={h(PlusOutlined)} onClick={this.onShowDrawer}>新建保司规则</Button>
        </div>
    }

    render() {
        return <div class="h-full">
            {super.renderNoFilterTable()}
            {
                this.showDrawer && <DrawerAdd v-model:show={this.showDrawer} type={this.type} itemData={this.curData} onRefresh={() => this.reloadPage(1)} />
            }
            <DrawerPreview v-model:show={this.showPreview} id={this.curData.id} />
        </div>
    }
}

export default toNative<{}, {}>(InsuranceCompanyView)